.menu-btn {
	position: relative;
	display: inline-block;

	.menu-toggle {
		cursor: pointer;
	}

	.menu {
		display: none;
		position: absolute;
		right: 0;
		border: 1px solid var(--background-modifier-border-hover);
		background-color: var(--background-secondary);
		flex-direction: column;
		min-width: 160px;
		box-shadow: var(--shadow-s);
		z-index: 1;
		list-style-type: none;
		padding: 0.25rem;
		margin: 0.25rem 0 0 0;
		border-radius: var(--radius-s);
		user-select: none;
		-webkit-user-select: none;
	}

	.menu.show {
		display: flex;
	}
}

.menu-item {
	display: flex;
	align-items: center;
	cursor: pointer;
	gap: 0.5rem;
	padding: 0.25rem 0.5rem;
	font-size: var(--font-ui-smaller);
	border-radius: var(--radius-s);
	white-space: nowrap;

	&:hover {
		background-color: var(--background-modifier-hover);
	}
}

.menu-item-icon {
	flex: 0 1 auto;
	display: flex;
	color: var(--text-muted);
}

.is-mobile {
	.menu {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		border: none;
		z-index: 10;
		padding: 1rem;
		border-radius: 0;
		border-top-left-radius: var(--radius-l);
		border-top-right-radius: var(--radius-l);
		.menu-item {
			font-size: var(--font-ui-small);
			padding: 0.5rem;
		}
	}

	body.menu-open {
		overflow: hidden;
	}
	body.menu-open .menu-btn:before {
		content: '';
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(var(--mono-rgb-100), 0.1);
		z-index: 9;
	}
}